---
metaTitle: Accessible Icon
metaDescription: Makes icons accessible by adding a label.
name: accessible-icon
---

# Accessible Icon

<Description>Makes icons accessible by adding a label.</Description>

<Highlights
	features={[
		"Quickly make any icon accessible by wrapping it and providing a meaningful label.",
		"No visual difference, but announced correctly by screen readers.",
	]}
/>

## Installation

Install the component from your command line.

```bash
npm install @radix-ui/react-accessible-icon
```

## Anatomy

Import the component.

```jsx
import { AccessibleIcon } from "radix-ui";

export default () => <AccessibleIcon.Root />;
```

## API Reference

### Root

Contains the icon to make accessible.

<PropsTable
	data={[
		{
			name: "label",
			required: true,
			type: "string",
			description: (
				<span>
					The accessible label for the icon. This label will be visually hidden
					but announced to screen reader users, similar to <Code>alt</Code> text
					for <Code>img</Code>
					tags.
				</span>
			),
		},
	]}
/>

## Accessibility

Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon may in fact mean **"close"** or **"delete"**. This component lets you give meaning to icons used throughout your app.

This is built with [Visually Hidden](../utilities/visually-hidden).
